<template>
  <div class="user-manage-page">
    <div class="data-wrapper">
      <div class="title-wrapper">
        <span class="title">角色列表</span>
      </div>
      <div class="table-wrapper">
        <el-table
          :data="tableData"
          stripe
          fit
          class="self-stripe-table"
          height="100%"
        >
          <el-table-column type="index" label="序号" width="100" />
          <el-table-column prop="name" label="角色名" />
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { getRoleListAPI, RoleType } from "@/api/service/role";

// 表格数据
const tableData = ref<RoleType[]>([]);
// API调用保护状态
const listApiLoading = ref(false);

// 页面初始化
onMounted(() => {
  loadRoleList();
});

// 加载角色列表
const loadRoleList = async () => {
  try {
    listApiLoading.value = true;
    const response = await getRoleListAPI();
    const result = response as any as RoleType[];
    if (result) {
      tableData.value = result || [];
    }
  } catch (error) {
    ElMessage.error("获取角色列表失败");
    console.error("Load role list error:", error);
  } finally {
    listApiLoading.value = false;
  }
};
</script>

<style scoped lang="scss">
.user-manage-page {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.title-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 2rem;
  padding-left: 1rem;
  color: $color_brand;
  font-size: $font-size-block-title;
}
.title-wrapper::before {
  position: absolute;
  left: 0;
  top: 50%;
  display: block;
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: $color_brand;
  transform: translateY(-50%);
}
.search-wrapper {
  background-color: #fff;
  flex-shrink: 0;
  padding: 1.5rem;
  border-bottom: 1px solid $border-color-primary;
  .content-wrapper {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    padding: 2rem 2rem 0 2rem;
  }
  .search-item {
    display: flex;
    align-items: center;
    padding-right: 2rem;
    .item-label {
      display: inline;
      padding-right: 1rem;
      flex-wrap: nowrap;
      text-align: right;
      color: $text-color-regular;
    }
    .item-input {
      width: 20rem;
    }
  }
  .search-btn {
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    background-color: $color_brand;
    color: #fff;
    border-radius: 0.5rem;
    cursor: pointer;
  }
  .add-btn {
    position: absolute;
    right: 3.2rem;
    top: 2rem;
    display: flex;
    align-items: center;
    padding: 0.5rem 1.5rem;
    background-color: $color_brand;
    color: #fff;
    border-radius: 0.5rem;
    cursor: pointer;
  }
}
.data-wrapper {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  background-color: #fff;
  .table-wrapper {
    padding: 0 2rem;
    flex: 1;
    min-height: 0;
    margin-top: 1.5rem;
  }
  .table-btn {
    display: inline-flex;
    align-items: center;
    background-color: $color_brand;
    color: #fff;
    margin-left: 0.5rem;
    padding: 0 1rem;
    border-radius: 0.5rem;
    font-size: $font-size-base-btn-text;
    cursor: pointer;
    &.disabled {
      background-color: $text-color-disabled;
      border: 1px solid $text-color-disabled;
      cursor: not-allowed;
    }
  }
  .table-btn:first-child {
    margin-left: 0;
  }
  .table-btn:hover {
    text-decoration: underline;
  }
  .signal-status.normal {
    color: $color_success;
  }
  .signal-status.abnormal {
    color: $color_danger;
  }
}

// 设置宽高16:9
:deep(.el-dialog) {
  margin-top: 3rem !important;
}
</style>
